<template>
  <div class="versions">
    <div class="tip">
      <div class="common">
        <div class="common-input">
          <el-select v-model="commonAppValue" placeholder="请选择" clearable>
            <el-option v-for="item in commonAppOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>

        <div class="common-input">
          <el-select v-model="commonUpdateValue" placeholder="请选择" clearable>
            <el-option v-for="item in commonUpdateOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>

        <div class="common-input">
          <el-date-picker v-model="commonDate" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
          </el-date-picker>
        </div>

        <div class="common-button" @click="searchHit">搜索</div>
        <div class="common-button" @click="replacementHit">重置</div>
      </div>

      <div class="common-add" @click="addHit">新增</div>
    </div>

    <div class="table" v-loading="loading">
      <el-table :data="tableData" border :header-cell-style="{
        color: '#333333',
        backgroundColor: '#f3f3f3',
      }">
        <el-table-column prop="appType" label="APP类别">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.appType == 0">安卓</el-tag>
            <el-tag type="warning" v-if="scope.row.appType == 1">苹果</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="versions" label="版本号"> </el-table-column>
        <el-table-column prop="versionsContent" label="更新描述">
        </el-table-column>

        <el-table-column prop="updateTime" label="更新时间"> </el-table-column>
        <el-table-column prop="" label="是否强制更新">
          <template slot-scope="scope">
            {{ scope.row.isCoerce == 1 ? "是" : "否" }}
          </template>
        </el-table-column>

        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <div class="operation">
              <div class="list" @click.prevent="editHit(scope.row)">编辑</div>

              <div class="list" @click.prevent="deteleHit(scope.row)">删除</div>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
          layout="prev, pager, next" :total="tableDataTotal" :current-page="page">
        </el-pagination>
      </div>
    </div>

    <!--编辑弹出框-->
    <div class="add">
      <el-dialog :title="addRoaid == 0 ? '新增APP' : '编辑APP'" :visible.sync="versionsVisible" width="40%"
        :before-close="versionsClose">
        <div class="add-form">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
            <el-form-item label="APP类型" prop="appType">
              <el-select v-model="ruleForm.appType" placeholder="请选择">
                <el-option v-for="item in ruleForm.appTypeOptions" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="版本号" prop="versionsNum">
              <el-input v-model="ruleForm.versionsNum" placeholder="请输入版本号，列如1.0.0"></el-input>
            </el-form-item>
            <el-form-item label="是否强制更新" prop="constraintRadio">
              <el-radio v-model="ruleForm.constraintRadio" label="1">是</el-radio>
              <el-radio v-model="ruleForm.constraintRadio" label="0">否</el-radio>
            </el-form-item>

            <el-form-item label="更新描述" class="describe">
              <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="ruleForm.appTextarea">
              </el-input>

              <div class="describe-select">
                <el-select v-model="ruleForm.describeType" placeholder="请选择">
                  <el-option v-for="item in ruleForm.appTypeOptions" :key="item.value" :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </el-form-item>

            <el-form-item label="上传文件">
              <div class="uploading">
                <el-upload class="img" action="https://api-qingchuang.xmw1688.com/common/upload" :show-file-list="false"
                  :on-success="handleAvatarSuccess">
                  <img src="@/assets/images/uploading.png" alt="" />
                </el-upload>
                <div class="text" @click="uploadingHit">
                  {{ ruleForm.versionsimageUrl }}
                </div>
              </div>
            </el-form-item>

            <el-form-item class="attachment">
              <div class="list" @click="versionsClose">取消</div>
              <div class="list" @click="versionsConfirm('ruleForm')">保存</div>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </div>

    <!--删除弹出框-->
    <div class="delete">
      <el-dialog title="删除版本" :visible.sync="deleteVisible" :before-close="deleteClose">
        <div class="delete-title">是否确认删除？</div>
        <div class="delete-attachment">
          <div class="list" @click="deleteClose">取消</div>
          <div class="list" @click="deleteConfirm">确定</div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  systemVersionsList,
  systemVersionsListId,
  systemVersionsListAdd,
  systemVersionsListDelete,
} from "@/api/system";

var throttle = require("@/utils/throttle"); // 防抖

export default {
  data() {
    return {
      commonAppOptions: [
        {
          value: "-1",
          label: "全部APP",
        },
        {
          value: "0",
          label: "Android",
        },
        {
          value: "1",
          label: "Ios",
        },
      ],
      commonAppValue: "",
      commonUpdateOptions: [
        {
          value: "0",
          label: "否",
        },
        {
          value: "1",
          label: "是",
        },
      ],
      commonUpdateValue: "",

      commonDate: [],
      commonStart: "",
      commonEnd: "",
      //-------------
      page: 1,
      limit: 10,
      tableData: [],
      tableDataTotal: 0,
      addRoaid: 0,

      //---------权限
      versionsObj: {},
      versionsVisible: false,
      ruleForm: {
        appTypeOptions: [
          {
            value: "0",
            label: "Android",
          },
          {
            value: "1",
            label: "Ios",
          },
        ],
        appType: "",
        versionsNum: "",
        constraintRadio: "",
        appTextarea: "",
        describeType: "",
        //----------
        versionsimageUrl: "",
      },
      rules: {
        appType: [
          { required: true, message: "请选择APP类型", trigger: "blur" },
        ],
        versionsNum: [
          { required: true, message: "请输入版本号", trigger: "blur" },
        ],
        constraintRadio: [
          { required: true, message: "请选择是否强制更新", trigger: "blur" },
        ],
      },
      //---------删除
      deleteVisible: false,
      loading: false,
    };
  },
  created() {
    this.loading = true;
    this.systemVersionsListMet();
  },
  methods: {
    systemVersionsListMet() {
      let params = {
        startTime: this.commonStart,
        endTime: this.commonEnd,
        appType: this.commonAppValue == -1 ? "" : this.commonAppValue, // app类型 0安卓 1苹果
        isCoerce: this.commonUpdateValue, // 是否强制更新 1是
        pageSize: this.limit,
        pageNo: this.page,
      };

      systemVersionsList(params).then((res) => {
        if (res.errorCode == null) {
          this.tableData = res.resultData.versionsList;
          this.tableDataTotal = res.resultData.totalNum;

          this.loading = false;
        }
      });
    },
    timeData(date) {
      return date.toLocaleString("zh-CN", {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
        // hour: "2-digit",
        // minute: "2-digit",
        // second: "2-digit",
      });
    },

    searchHit() {
      if (this.commonDate.length > 0) {
        this.commonStart = this.timeData(new Date(this.commonDate[0]));
        this.commonEnd = this.timeData(new Date(this.commonDate[1]));
      }

      this.page = 1;
      this.loading = true;
      this.systemVersionsListMet();
    },
    replacementHit() {
      this.commonDate = [];
      this.commonStart = "";
      this.commonEnd = "";

      this.page = 1;
      this.loading = true;
      this.systemVersionsListMet();
    },

    //---------------
    addHit() {
      this.addRoaid = 0;
      this.versionsVisible = true;
    },
    editHit(item) {
      this.addRoaid = 1;
      let params = item.versionsId;

      systemVersionsListId(params).then((res) => {
        if (res.errorCode == null) {
          this.versionsObj = res.resultData;

          this.ruleForm.appType = res.resultData.appType + "";
          this.ruleForm.versionsNum = res.resultData.versions;
          this.ruleForm.constraintRadio = res.resultData.isCoerce + "";
          this.ruleForm.appTextarea = res.resultData.versionsContent;
          //---------
          this.ruleForm.versionsimageUrl = res.resultData.fileUrl;

          this.versionsVisible = true;
        }
      });
    },
    deteleHit(item) {
      this.versionsObj = item;
      this.deleteVisible = true;
    },
    //----------
    versionsClose() {
      this.ruleForm.appType = "";
      this.ruleForm.versionsNum = "";
      this.ruleForm.constraintRadio = "";
      this.ruleForm.appTextarea = "";
      this.ruleForm.versionsimageUrl = "";

      this.versionsVisible = false;
    },
    versionsConfirm: throttle.throttle(function (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {
            versionsId: this.addRoaid == 0 ? "" : this.versionsObj.versionsId,
            appType: this.ruleForm.appType,
            versions: this.ruleForm.versionsNum,
            versionsContent: this.ruleForm.appTextarea,
            isCoerce: this.ruleForm.constraintRadio,
            //---------
            fileUrl: this.ruleForm.versionsimageUrl,
          };

          console.log("获取添加数组", params);

          systemVersionsListAdd(params).then((res) => {
            if (res.errorCode == null) {
              if (this.addRoaid == 0) {
                this.$message.success("新增版本成功！");
              } else {
                this.$message.success("编辑版本成功！");
              }

              this.loading = true;
              this.systemVersionsListMet();
              this.versionsVisible = false;
            }
          });
        } else {
          return false;
        }
      });
    }, 3000),

    //---------上传
    handleAvatarSuccess(res, file) {
      this.ruleForm.versionsimageUrl = res.resultData;
    },
    uploadingHit() {
      window.open(this.ruleForm.versionsimageUrl, "_black");
    },
    //-----------
    deleteClose() {
      this.deleteVisible = false;
    },
    deleteConfirm() {
      let params = this.versionsObj.versionsId;

      systemVersionsListDelete(params).then((res) => {
        if (res.errorCode == null) {
          this.deleteVisible = false;
          this.$message.success("删除成功！");
          this.loading = true;
          this.systemVersionsListMet();
        }
      });
    },
    //---------
    handleSizeChange(val) {
      this.limit = val;
      this.loading = true;
      this.systemVersionsListMet();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.loading = true;
      this.systemVersionsListMet();
    },
  },
};
</script>

<style lang="less" scoped>
.versions {
  .common {
    margin-bottom: 10px;
    display: flex;
    align-items: center;

    .common-input {
      margin-right: 10px;

      /deep/ .el-input {
        width: 250px;
      }
    }

    .common-input:last-child {
      margin-right: 0;
    }

    .common-button {
      padding: 9px 20px;
      box-sizing: border-box;
      border-radius: 5px;
      background: #2a82e4;
      font-size: 14px;
      color: #fff;
      margin-left: 20px;
      cursor: pointer;
    }

    .common-button:last-child {
      background: #999999;
    }
  }

  .common-add {
    padding: 9px 20px;
    box-sizing: border-box;
    border-radius: 5px;
    background: #2a82e4;
    font-size: 14px;
    color: #fff;
    margin-left: 20px;
    cursor: pointer;
  }

  .table {
    cursor: pointer;

    .operation {
      display: flex;
      align-items: center;
      color: #2a82e4;

      .list {
        margin-right: 20px;
        cursor: pointer;
      }
    }
  }

  //-------

  .add {
    /deep/ .el-dialog__header {
      font-size: 16px;
      text-align: center;
    }

    /deep/ .el-dialog__wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
    }

    /deep/ .el-dialog__body {
      padding-bottom: 10px;
    }

    /deep/ .el-dialog {
      margin: 0 !important;
    }

    .add-form {
      /deep/ .el-select {
        width: 100%;
      }

      /deep/ .el-textarea__inner {
        resize: none;
      }

      .describe {
        position: relative;

        /deep/ .el-textarea__inner {
          padding-bottom: 50px;
        }

        .describe-select {
          position: absolute;
          bottom: 10px;
          right: 20px;
          width: 150px;
          height: 40px;

          /deep/ .el-input__inner {
            height: 40px;
          }

          /deep/ .el-form-item__content {
            line-height: 40px;
          }
        }
      }

      .uploading {
        /deep/ .el-form-item__content {
          margin-left: 0 !important;
          display: flex;
        }

        .img {
          width: 100px;
          height: 100px;
          border: 1px solid #ccc;
          border-radius: 5px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 10px;
          margin-bottom: 10px;

          img {
            width: 50%;
            height: 50%;
          }
        }

        .text {
          cursor: pointer;
          font-size: 14px;
        }

        .text:hover {
          color: #2a82e4;
        }
      }

      .attachment {
        margin-top: 50px;

        /deep/ .el-form-item__content {
          margin-left: 0 !important;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .list {
          background: #3da8f5;
          color: #fff;
          font-size: 16px;
          margin-right: 50px;
          border-radius: 5px;
          width: 100px;
          height: 35px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }

        .list:first-child {
          background: #808080;
        }

        .list:last-child {
          margin-right: 0;
        }
      }
    }
  }

  .delete {
    /deep/ .el-dialog {
      width: 400px;
      text-align: center;
      margin-top: 35vh !important;
    }

    /deep/ .el-dialog__footer {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /deep/ .el-button+.el-button {
      margin-left: 30px;
    }

    /deep/ .el-dialog__title {
      font-size: 18px;
    }

    .delete-title {
      font-size: 16px;
    }

    .delete-attachment {
      margin-top: 30px;
      display: flex;
      align-items: center;
      justify-content: center;

      .list {
        background: #3da8f5;
        color: #fff;
        font-size: 14px;
        margin-right: 50px;
        border-radius: 5px;
        width: 80px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }

      .list:first-child {
        background: #808080;
      }

      .list:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>